<template>
	<view class="page">
		<!-- 水印相机页面 -->
		<navigator class="buttons" url="/pages/watermark/index"><button type="primary">打开水印相机</button></navigator>
		<view>拍摄结果预览图，见下方</view>
		<view class="img-list">
			<view class="img-item" v-for="(item,index) in imgList" :key="index" @click="lookImg(index)">
				<image :src="item"></image>
			</view>
		</view>
		<canvas id="canvas-clipper" canvas-id="canvas-clipper" type="2d"
			:style="{width: canvasSiz.width+'px',height: canvasSiz.height+'px',position: 'absolute',left:'-500000px',top: '-500000px'}" />
			
			<canvas canvas-id="watermarkCanvas" style="width: 400rpx; height: 300rpx; background-color: #eee;" type="2d"></canvas>
	</view>
</template>
 
<script>
	var _this;
	export default {
		data() {
			return {
				windowWidth: '',
				windowHeight: '',
				imagesrc: null,
				imgList: [],
				canvasSiz: {
					width: 188,
					height: 273
				}
			};
		},
		onLoad() {
			_this = this;
			this.init();
			// uni.$on('onShotImage', this.setImage);
			uni.$on("getSubPhoto", this.setSubPhoto)
		},
		methods: {
			setImage(info) {
				// this.imgList.push(path);
				this.watermark(info)
				
			},
			setSubPhoto(rect) {
				const context = uni.createCanvasContext('watermarkCanvas', this)
				let yOffset = 30
				rect.children.forEach(child => {
					const text = child.attr?.value || ''
					const style = child.style || {}

					const color = style.color || '#000'
					const fontSize = style.fontSize ? `${style.fontSize}px` : '16px'

					context.setFontSize(parseFloat(style.fontSize || 16))
					context.setFillStyle(color)
					context.fillText(text, 20, yOffset)

					yOffset += parseFloat(style.fontSize || 16) + 10 // 行高控制
				})

				context.draw()
			},
			//添加照片水印
			watermark(info) {
				console.log("获取到的数据为", info)
				uni.getImageInfo({
					src: info.path,
					success: function(image) {
						console.log(image);
						_this.canvasSiz.width = image.width;
						_this.canvasSiz.height = image.height;
						let maxWidth = image.width - 60;
						setTimeout(() => {
							let ctx = uni.createCanvasContext('canvas-clipper', _this);
 
							ctx.drawImage(
								info.path,
								0,
								0,
								image.width,
								image.height
							);
 
							//具体位置如需和相机页面上一致还需另外做计算，此处仅做大致演示
							ctx.setFillStyle('white');
							ctx.setFontSize(50);
 
							ctx.fillText(info.info.username, 20, 150);
							ctx.setFontSize(50);
							let previousRowHeight = _this.textPrewrap(ctx, info.info.address, 20, 220,
								70, maxWidth, 3);
 
							//再来加个时间水印
							ctx.setFontSize(40);
							ctx.fillText(info.info.time, 20, previousRowHeight + 70);
 
							ctx.draw(false, () => {
								uni.canvasToTempFilePath({
										destWidth: image.width,
										destHeight: image.height,
										canvasId: 'canvas-clipper',
										fileType: 'jpg',
										success: function(res) {
											_this.savePhoto(res.tempFilePath);
										}
									},
									_this
								);
							});
						}, 500)
 
 
					}
				});
			},
			textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {
				var drawTxt = ''; // 当前绘制的内容
				var drawLine = 1; // 第几行开始绘制
				var drawIndex = 0; // 当前绘制内容的索引
				// 判断内容是否可以一行绘制完毕
				if (ctx.measureText(content).width <= lineMaxWidth) {
					ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
				} else {
					for (var i = 0; i < content.length; i++) {
						drawTxt += content[i];
						if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
							if (drawLine >= lineNum) {
								ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);
								break;
							} else {
								ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
								drawIndex = i + 1;
								drawLine += 1;
								drawY += lineHeight;
								drawTxt = '';
							}
						} else {
							// 内容绘制完毕，但是剩下的内容宽度不到lineMaxWidth
							if (i === content.length - 1) {
								ctx.fillText(content.substring(drawIndex), drawX, drawY);
								return drawY;
								console.log("最后高度为", drawY);
							}
						}
					}
				}
			},
			//保存图片到相册，方便核查
			savePhoto(path) {
				this.imgList.push(path)
			},
			lookImg(index) {
				// 预览图片
				uni.previewImage({
					current: index,
					urls: this.imgList,
				});
			},
			//初始化
			init() {
				let _this = this;
				uni.getSystemInfo({
					success: function(res) {
						_this.windowWidth = res.windowWidth;
						_this.windowHeight = res.windowHeight;
					}
				});
			}
 
		}
	};
</script>
 
<style lang="less">
	.page {
		width: 750rpx;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		display: flex;
 
		.buttons {
			width: 600rpx;
		}
	}
 
	.img-list {
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
 
	.img-item {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
 
	}
 
	.img-item image {
		width: 100%;
		height: 100%;
	}
</style>